<template>
<el-drawer :title="formDrawer.title" :visible.sync="formDrawer.visible" size="50%" direction="rtl" custom-class="drawer-right-side" :before-close="closeDrawer" :append-to-body="true">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="top" class="ruleForm">
        <el-form-item label="跟进状态" prop="status">
            <el-select v-model="ruleForm.status" placeholder="请选择跟进状态" class="w100">
                <el-option v-for="(item,key) in statusList" :key="key" :label="item.title" :value="item.id"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="无效原因" v-if="ruleForm.status == 6" prop="invalid" :rules="[{required:true,message:'请选择无效原因'}]">
            <el-select v-model="ruleForm.invalid" placeholder="请选择无效原因">
                <el-option v-for="item in invalidList" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item v-if="isShowNextVisit" label="下次回访时间" prop="next_visit_time" :rules="{required: true,message: '请选择下次回访时间',trigger: 'change'}">
            <el-date-picker class="w100" type="datetime" v-model="ruleForm.next_visit_time" placeholder="请选择下次回访时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
            <el-input v-model="ruleForm.remark" type="textarea" placeholder="备注"></el-input>
        </el-form-item>

        <el-form-item label="附件">
            <upload-files ref="uploadFiles" v-model="ruleForm.files"></upload-files>
        </el-form-item>

        <div class="fixed-bottom" style="width:50vw;">
            <el-button type="primary" size="small" @click="submit">确认并提交</el-button>
        </div>
    </el-form>
</el-drawer>
</template>

<script>
import {
    createVisitApi,
} from "@/api/customer/visit.js";
import {
    getPickerApi
} from "@/api/system/dictionary/status.js";
import uploadFiles from '@/components/upload/files.vue';

const ruleForm = {
    member_id: '',
    status: "",
    invalid: "",
    next_visit_time: "",
    files: [],
    remark: ""
};

export default {
    components: {
        uploadFiles,
    },
    data() {
        return {
            formDrawer: {
                title: "添加回访",
                visible: false,
            },
            statusList: [],
            ruleForm: Object.assign({}, ruleForm),
            rules: {
                status: [{
                    required: true,
                    message: "请选择跟进状态",
                    trigger: "change",
                }],
                remark: [{
                    required: true,
                    message: "请填写备注",
                    trigger: "blur",
                }],
            },
        };
    },
    computed: {
        isShowNextVisit() {
            let target = this.statusList.find(ele => ele.id == this.ruleForm.status);
            if (!target) return false;

            return target.need_next_visit == 1 ? true : false;
        },
        invalidList() {
            let localData = localStorage.getItem("invalidPickerList");
            if (localData) {
                return JSON.parse(localData);
            } else {
                return [];
            }
        }
    },
    methods: {
        showDrawer(member_id) {
            this.ruleForm = Object.assign({}, ruleForm);
            this.ruleForm.member_id = member_id;
            this.ruleForm.files = [];
            this.formDrawer.visible = true;
            this.$nextTick(() => {
                this.$refs.uploadFiles.clearFiles();
            })
            this.getStatusPicker();
        },
        closeDrawer() {
            this.$refs.uploadFiles.clearFiles();
            this.formDrawer.visible = false;
        },
        getStatusPicker() {
            getPickerApi({}).then(res => {
                this.statusList = res.data.list;
            })
        },
        submit() {
            let _this = this;
            this.$refs["ruleForm"].validate((valid) => {
                if (!valid) {
                    return false;
                }
                let data = Object.assign({}, _this.ruleForm);

                // 添加客资
                createVisitApi(data).then((res) => {
                    if (res.code == "200") {
                        _this.$message.success(res.msg);
                        _this.formDrawer.visible = false;
                        this.$refs.uploadFiles.clearFiles();
                        _this.$emit("refreshVisit");
                    } else {
                        _this.$message.warning(res.msg);
                    }
                });
            });
        },
    },
};
</script>
